<template>
	<div class="citymsg">
		<article class="common">
			<h3>定位/附近城市</h3>
			<ul>
				<li>{{show}}</li>
			</ul>
		</article>
		<article class="common">
			<h3>热门城市</h3>
			<ul>
				<li v-for="item in hotcitylist" :key="item.code" @click="toHome(item.name)" :class="{'default':show==item.name }">{{item.name}}</li>
			</ul>
		</article>
		<article class="common" v-for="(item,index) in citylist" :key="index">
			<h3>字母以{{item.initial}}开头的城市</h3>
			<ul>
				<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{'default':show==key.name }">
					{{key.name}}
				</li>
			</ul>
		</article>
	</div>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	export default{
		name:'Citymsg',
		data(){
			return{
				hotcitylist:[],
				citylist:[],
				show:'广州'
			}
		},
		methods:{
			toHome(cname){
				this.show=this.cityName
				this.changecity(cname)
				//返回首页
				this.$router.push('/')
			},
			//激活mutations方法
			...mapMutations(['changecity'])
		},
		mounted(){
			if(localStorage.city){
				this.show=localStorage.city
			}
		},
		created(){
			let that=this
			this.axios.get('/api/city.json').then( (res)=>{
				if(res.status===200){
					let data=res.data.data
					this.hotcitylist=data.hotCities
					this.citylist=data.city
				}
				
			} ).catch( (error)=>{
				console.log(error);
			} )
			
		}
	}
</script>

<style scoped>
	.citymsg .common .default{
		background-color: #FED101;
		color: white;
	}
	.citymsg article {
		overflow: hidden;
		width: 95%;
		margin: auto;
		border-bottom: 1px solid #3d3d3d;
	}
	.citymsg article h3{
		text-indent: 1em;
		font-size: .4rem;
		line-height: 1rem;
		float: left;
		color: #808080;
		width: 100%;
	}
	.citymsg ul li{
		background-color: #e6e6e6;
		width: 15%;
		color: #9a9a9a;
		height: 1rem;
		float: left;
		line-height: 1rem;
		font-size: .3rem;
		margin-bottom: .4rem;
		margin-left: .1rem;
		text-align: center;
		border-radius: .4rem;
	}
	.citymsg ul li:last-child{
		margin-bottom: .6rem;
	}
</style>
